<template>
    <div @click="changePageNo" class="pagination">
        <button :data-page="pageNo-1" :disabled="pageNo === 1">上一页</button>
        <button :data-page="1" v-show="startAndEnd.startPage>1">1</button>
        <span v-show="startAndEnd.startPage>2">···</span>

        <!--方案3-->
        <button :data-page="startAndEnd.startPage+item-1" :class="{active:pageNo===(startAndEnd.startPage+index)}" v-for="(item,index) in (startAndEnd.endPage-startAndEnd.startPage+1)">
            {{startAndEnd.startPage+item-1}}
        </button>

        <span v-show="startAndEnd.endPage<pageSum-1">···</span>
        <button  :data-page="pageSum" v-show="startAndEnd.endPage < pageSum">{{pageSum}}</button>
        <button :data-page="pageNo+1" :disabled="pageNo === pageSum">下一页</button>
        <span>共 {{total}} 条</span>
    </div>
</template>

<script>
export default {
    name: "Pagination",
    methods:{
        changePageNo(e){
            this.$emit("change-page-no",e.target.dataset.page);
        }
    },
    computed:{
        // 总页数
        pageSum(){
            return Math.ceil(this.total/this.pageSize)
        },
        startAndEnd(){
            let startPage = 1;
            let endPage = 1;
            // 如果连续页码数大于总页数
            if(this.continue>this.pageSum){
                // 起始位置为1
                // 起始位置为4
                endPage=this.pageSum;
            }else{
                // 总页数：this.pageSum---->11
                // 连续页数：this.continue---->5
                // 当前页：this.pageNo---->1
                // 起始位置小于1
                startPage = this.pageNo-(this.continue-1)/2;//  -1
                endPage = this.pageNo+(this.continue-1)/2;// 3
                // 如果起始页数小于1
                if(startPage<1){
                    startPage = 1;
                    endPage = this.continue;// 5
                }
                if(endPage>this.pageSum){
                    endPage = this.pageSum;// 11
                    startPage = endPage-this.continue+1;// 7
                }
            }

            return {
                startPage,
                endPage
            }
        }
    },
    props:{
        // 总条数
        total:Number,
        // 连续页码
        continue:{
            type:Number,
            default:5
        },
        // 当前页码
        pageNo:{
            type:Number,
            required:true
        },
        // 每页显示的条数
        pageSize:{
            type:Number,
            default:10
        }
    }
}
</script>

<style lang="less" scoped>
.pagination {
    text-align: center;

    button {
        margin: 0 5px;
        background-color: #f4f4f5;
        color: gray;
        outline: none;
        border-radius: 2px;
        padding: 0 4px;
        vertical-align: top;
        display: inline-block;
        font-size: 13px;
        min-width: 35.5px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        border: 0;

        &[disabled] {
            color: #c0c4cc;
            cursor: not-allowed;
        }

        &.active {
            cursor: not-allowed;
            background-color: #c81623;
            color: #fff;
        }
    }

    span {
        display: inline-block;
        line-height: 28px;
        font-size: 14px;
        color: gray;
        vertical-align: middle;
    }
}
</style>